<template name="home">
	<view>
		<scroll-view>
			<cu-custom bgColor="bg-green" :isBack="false">
				<block slot="backText"></block>
				<block slot="content">首页</block>
			</cu-custom>
		<!-- 中部应用宫格 -->
		<view class="bg-grey">
			<view class="bg-grey-top">
				<view class="bg-grey-top-item">
					<view>
						<text class='box-title'>指令单</text>
						<view class='box-green'>{{numberToCurrencyNo(orders)}}</view>
					</view>
				</view>
				<view class="bg-grey-top-item">
					<text class='box-title'>总产量</text>
					<view class='box-green'>{{stockIn}}</view>
				</view>
			</view>
			<!-- <view class="bg-grey-item">
				<view class="bg-grey-item-left">
					<text class='box-title'>计划数(双)</text>
					<view class='bg-grey-item-green'>2600</view>
				</view>
				<view class="bg-grey-item-right">
					<image class="img" src="../../static/icon/plan.png" mode="widthFix" />
				</view>
			</view> -->
			<view class="bg-grey-item">
				<view class="bg-grey-item-left">
					<text class='box-title'>在制数量</text>
					<view class='bg-grey-item-green'>{{numberToCurrencyNo(completed)}}</view>
				</view>
				<view class="bg-grey-item-right">
					<view class="qiun-charts3">
						<canvas canvas-id="ringChart" id="ringChart" class="charts3"></canvas>
					</view>
				</view>
			</view>
			<view class="bg-grey-item">
				<view class="bg-grey-item-left">
					<text class='box-title'>合格率</text>
					<view class='bg-grey-item-orange'>{{passed}}%</view>
				</view>
				<view class="bg-grey-item-right">
					<image class="img" src="../../static/icon/fail.png" mode="widthFix" />
				</view>
			</view>
		</view>
		<!-- <view>
			<mix></mix>
		</view>
		<view>
			<column :rotate='rotate'></column>
		</view> -->
		<view class="bg-grey">
			<view class="bg-grey-title">
				<ul id="menu">
					<li v-for="(item,index) in tabMenu" :key="item.value" @click='menuActive(item.value)'
						:class="[item.value==active?'green':'']">{{item.title}}
					</li>
				</ul>
			</view>
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">员工报工数量排名</view>
			<!-- <view class="qiun-title-right">查看 >></view> -->
		</view>
		<view class="qiun-charts">
			<view class='member-title'>
				<view class='member-title-left'>排名</view>
				<view class='member-title-right'>数量</view>
			</view>
			<view class='member-body'>
				<view class='member-body-item' v-for="(item,index) in member" :key="item.value">
					<view class='member-body-item-left'>
						<view class="circle">
							{{index+1}}
						</view>
						<!-- <image class="userImg" src="../../static/icon/user.png" mode="widthFix" /> -->
					</view>
					<view class='member-body-item-center'>
						{{item.value}}
					</view>
					<view class='member-body-item-right'>
						{{item.num}}
					</view>
				</view>
			</view>
		</view>
		</view>
		<!-- <view>
			<rose></rose>
		</view> -->
		<view class="cu-tabbar-height">
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import {
		hs,
		os
	} from '@/common/util/work.js'
	import uCharts from '@/sdk/u-charts/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	// import rose from '@/pages/component/uchart/rose.vue'
	// import column from '@/pages/component/uchart/column.vue'
	// import mix from '@/pages/component/uchart/mix.vue'
	var _self;
	var canvaColumn = null;
	var canvaArea = null;
	var canvaLineA = null;
	// var canvaRose = null;
	var canvaRing = null;
	var canvaColumnRotate = null;
	var canvaColumngdzz = null;
	var changeDatawdj = null;
	var canvaGauge = null;
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					// console.log('watch', this.cur)
					this.initMenu()
				},
			},
		},
		data() {
			return {
				total:0,
				passed:0,
				orders:0,
				completed:0,
				stockIn: 0,
				bgColor: 'bg-green',
				rotate: true,
				member: [],
				labelWidth: 100,
				chartData: {
					categories: [],
					series: [],
				},
				active: 'year',
				tabMenu: [{
					title: '今日',
					value: 'day'
				}, {
					title: '本周',
					value: 'week'
				}, {
					title: '本月',
					value: 'month'
				}, {
					title: '本年',
					value: 'year'
				}],
				StatusBar: 20,
				CustomBar: 60,
				pixelRatio: 1,
				textarea: '',
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gdzxWidth: '',
				gdzxHeight: '',
				yhtWidth: '',
				yhtHeight: '',
				gdzzWidth: '',
				gdzzHeight: '',
				wdjWidth: '',
				wdjHeight: '',
				ybpWidth: '',
				ybpHeight: '',
				gaugeWidth: 15,
				type: 'default',
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/banner/1.jpg',
						link: ''
					},
					// {id:2,type: 'image',url: '/static/banner/3.jpg', link: ''},
				],
				middleApps: [{
						icon: 'line2_icon1.png',
						title: '今日产量',
						'text': '0',
						'name': 'cltj'
					},
					{
						icon: 'line2_icon3.png',
						title: '今日合格率',
						'text': '100%',
						'name': 'passRate'
					},
				],
				// hsList: hs.data,
				// osList: os.data,
				cMenu: [],
				showmiddleApps: false,
				showChart: false,
				websock: '',
				heartCheck: null,
				lockReconnect: false,
				msgCount: 0,
				dot: {
					mailHome: false
				},
				chanlinagUrl: '/dcloud/sdReport/queryProductionProgressReport',
				passRateUrl: '/dcloud/sdReport/queryPassRateReport'
			}
		},
		components: {
			// rose,
			// column,
			// mix
		},
		created() {
			this.initDashboard();
			this.Workerrank();
			let that = this
			uni.getSystemInfo({
				success: function(e) {
					that.StatusBar = e.statusBarHeight;
					// #ifndef MP
					if (e.platform == 'android') {
						that.CustomBar = e.statusBarHeight + 50;
					} else {
						that.CustomBar = e.statusBarHeight + 45;
					};
					// #endif
					// #ifdef MP-WEIXIN
					let custom = wx.getMenuButtonBoundingClientRect();
					that.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif
				}
			})
			// hs.data.forEach(item => {
			// 	pathToBase64(item.icon).then(base64 => {
			// 		this.$set(item, 'icon', base64)
			// 	}).catch(error => {
			// 	})
			// })
		},
		methods: {
			menuActive(value) {
				this.active = value
				this.Workerrank(value)
			},
			touchColumngdzz(e) {
				canvaColumngdzz.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumngdzz.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumngdzz.scrollEnd(e);
				canvaColumngdzz.touchLegend(e, {
					animation: true,
				});
				canvaColumngdzz.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			initDashboard: function() {//首页订单信息
				let that = this
				let url = '/dcloud/dashboard/list'
				this.$http.get(url, {

				}).then(res => {
					if (res.data.success) {
						this.stockIn = res.data.result.stockIn
						this.passed = res.data.result.passed
						this.orders = res.data.result.orders
						this.completed = res.data.result.completed
					}
				}).catch(err => {
					console.log(err);
				});

			},
			Workerrank(value) {//员工报工信息
				let that = this
				let url = '/dcloud/dashboard/rank'
				let rank = value
				if(value == null){
					rank = "year"
				}
				this.$http.get(url, {
					params: {
						sign:rank
					}
				}).then(res => {
					this.member = []
					if (res.data.success) {
						res.data.result.forEach(v=>{
						  this.member.push({
							value:v.name,
							num:v.vornr
						  });
						});
					}
				}).catch(err => {
					console.log(err);
				});

			},
			initMenu() {
				// this.getChanliang();
				// this.getPassRate();
				this.initChart();
				this.getMpMenu();
			},
			getMpMenu() {
				//获取用户权限
				this.cMenu = []
				let username = uni.getStorageSync('login_user_info').username
				if (username == null || username == '') {
					return
				}
				this.$http.get('/dcloud/mpMenu/mpMenu/getMpMenu', {
					params: {
						username: username
					}
				}).then(res => {
					if (res.data.success) {
						let mpMenu = res.data.result
						mpMenu.forEach(item => {
							pathToBase64(item.icon).then(base64 => {
								this.$set(item, 'icon', base64)
							}).catch(error => {})
							if (item.common == "Y") {
								this.cMenu.push(item)
							}
							if (item.url == this.middleApps[0].name) {
								this.showmiddleApps = true
								this.showChart = true
							}
						})
						uni.setStorageSync("mpMenu", mpMenu)
					}
				}).catch(() => {
					// this.$tip.loaded();
					// this.$tip.error('获取系统权限失败')
				});
				//获取用户权限成功
			},
			initChart() {
				_self = this;
				this.cWidth3 = uni.upx2px(250); //这里要与样式的宽高对应
				this.cHeight3 = uni.upx2px(250); //这里要与样式的宽高对应
				this.arcbarWidth = uni.upx2px(24);
				this.gdzzWidth = uni.upx2px(750);
				this.gdzzHeight = uni.upx2px(500);
				// this.getServerDatagdzz();
			},
			getServerDatagdzz() {
				let url = '/sdReport/queryProductionProgressReport';
				this.$http.get(url, {
					params: {
						displayFlag: '0'
					}
				}).then(res => {
					if (res.data.success) {
						let Column = {
							categories: [],
							series: []
						};
						let s = {
							name: '',
							data: []
						}
						let max = 0;
						res.data.result.records.forEach(item => {
							Column.categories.push(item.vornrName);
							s.data.push(item.gmnga);
							if (item.gmnga > max) {
								max = item.gmnga
							}
						});
						Column.series[0] = s;

						_self.textarea = JSON.stringify(Column);
						setTimeout(function() {
							_self.showRing("ringChart", Column)
						}, 300);


					}
				}).catch(err => {
					console.log(err);
				});
			},
			showRing(canvasId, chartData) {
				console.log(_self.pixelRatio, this.cHeight3, 333)
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					padding: [30, 30, 30, 30],
					title: {
						name: '70%',
						// color: '#7cb5ec',
						color: 'black',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 10 * _self.pixelRatio,
					},
					subtitle: {
						name: '达成率',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 35 * _self.pixelRatio,
					},
					extra: {
						arcbar: {
							type: 'circle',
							width: 5,
							backgroundColor: '#E9E9E9',
							startAngle: 0.65,
							endAngle: 0.25,
							gap: 2,
							centerX: 0,
							centerY: 0,
							linearType: 'none',
							radius: 30
						}
					},
					// 	background: '#FFFFFF',
					// 	pixelRatio: _self.pixelRatio,
					series: [{
						"name": "正确率",
						"data": 0.8,
						"color": "#2fc25b"
					}],
					// 	animation: true,
					// width: _self.cWidth3 * _self.pixelRatio,
					// height: _self.cHeight3 * _self.pixelRatio,
					width: 80,
					height: 80,
					// 	disablePieStroke: true,
					// 	dataLabel: true,
				});

			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
			initWebSocket: function() {
				// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
				var userId = this.$store.getters.userid;
				var url = this.$config.apiUrl.replace("https://", "wss://").replace("http://", "ws://") +
					"/websocket/" + userId;
				console.log('websocket url>>' + url);
				this.websock = new WebSocket(url);
				this.websock.onopen = this.websocketOnopen;
				this.websock.onerror = this.websocketOnerror;
				this.websock.onmessage = this.websocketOnmessage;
				this.websock.onclose = this.websocketOnclose;
			},
			websocketOnopen: function() {
				console.log("WebSocket连接成功");
				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnerror: function() {
				console.log("WebSocket连接发生错误");
				this.reconnect();
			},
			websocketOnmessage: function(e) {
				console.log("-----接收消息-------", e.data);
				var data = eval("(" + e.data + ")"); //解析对象
				if (data.cmd == "topic") {
					//系统通知
					this.loadCount('1')
				} else if (data.cmd == "user") {
					//用户消息
					this.loadCount('2')
				} else if (data.cmd == 'email') {
					this.loadEmailCount()
				}

				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnclose: function(e) {
				console.log("connection closed (" + e.code + ")");
				this.reconnect();
			},
			websocketSend(text) { // 数据发送
				try {
					this.websock.send(text);
				} catch (err) {
					console.log("send failed (" + err.code + ")");
				}
			},
			reconnect() {},
			loadCount(flag) {
				console.log("loadCount::flag", flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						let msg1Count = res.data.result.anntMsgTotal;
						let msg2Count = res.data.result.sysMsgTotal;
						this.msgCount = msg1Count + msg2Count
						console.log("this.msgCount", this.msgCount)
					}
				})
			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			},
			getChanliang() {
				this.$http.get(this.chanlinagUrl, {
					params: {
						displayFlag: '1'
					}
				}).then(res => {
					// console.log(res)
					if (res.data.success) {
						if (res.data.result.records.length != 0) {
							this.middleApps[0].text = res.data.result.records[0].gmnga;
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			numberToCurrencyNo(value) {
				if (!value) return 0
				// 获取整数部分
				const intPart = Math.trunc(value)
				// 整数部分处理，增加,
				const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
				// 预定义小数部分
				let floatPart = ''
				// 将数值截取为小数部分和整数部分
				const valueArray = value.toString().split('.')
				if (valueArray.length === 2) { // 有小数部分
				  floatPart = valueArray[1].toString() // 取得小数部分
				  return intPartFormat + '.' + floatPart
				}
				return intPartFormat + floatPart
			  },
			getPassRate() {
				this.$http.get(this.passRateUrl, {
					params: {
						displayFlag: '1'
					}
				}).then(res => {
					if (res.statusCode == "200") {
						this.middleApps[1].text = res.data.Line.series[0].data[6] + '%';
					}
				}).catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin member-font {
		font-family: PingFangSC;
		font-weight: 700;
		font-size: 16px;
		font-style: normal;
		letter-spacing: 0px;
		line-height: 22px;
		text-decoration: none;
	}

	@mixin member-title-font {
		flex: 1;
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 14px;
		color: rgb(174, 174, 178);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 27px;
		text-decoration: none;
	}

	@mixin member {
		display: flex;
		height: 84rpx;
		line-height: 84rpx;
		.member-body-item-left {
			flex: 2;
			view {
				background-color: #f5f5f5;
				height: 46rpx;
				width: 46rpx;
				/* length为正方形边长的的一般 */
				border-radius: 50%;
				color: rgba(0, 0, 0, .65);
				text-align: center;
			}
		}

		.member-body-item-center {
			flex: 4;
			color: rgb(16, 16, 16);
			@include member-font;
		}

		.member-body-item-right {
			flex: 5;
			text-align: right;
			color: rgba(240, 135, 5, 1);
			@include member-font
		}
	}

	.qiun-title-bar {
		width: 100%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
		display: flex;
		justify-content: space-between;

		.qiun-title-right {
			// font-size: 32upx;
			// color:  #00BB7A;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: rgba(0, 187, 122, 1);
			font-style: normal;
			letter-spacing: 0px;
			line-height: 40rpx;
			text-decoration: none;
		}
	}

	.qiun-title-dot-light {
		border-left: 5px solid #0ea391;
		padding-left: 5px;
		font-size: 16px;
		color: #000000;
	}

	.member-body {
		padding: 0 150rpx 0 150rpx;

		.member-body-item:nth-of-type(1),
		.member-body-item:nth-of-type(2)
		{
			@include member
		}

		.member-body-item {
			@include member .member-body-item-left {
				flex: 2;
				view {
					background-color: #f5f5f5;
					;
					height: 46rpx;
					width: 46rpx;
					/* length为正方形边长的的一般 */
					border-radius: 50%;
					color: rgba(0, 0, 0, .65);
					text-align: center;
				}
			}
		}
	}

	.member-title {
		display: flex;
		// justify-content: space-between;
		padding: 0 150rpx 0 150rpx;
		height: 90rpx;

		.member-title-left {
			text-align: left;
			@include member-title-font
		}

		.member-title-right {
			text-align: right;
			@include member-title-font
		}
	}

	.img {
		width: 128rpx;
	}

	.userImg {
		width: 40rpx;
	}

	.box-title {
		height: 80rpx;
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 18px;
		color: rgb(174, 174, 178);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 80rpx;
		text-decoration: none;
	}

	/* 圆弧进度样式 */
	.qiun-charts3 {
		width: 200upx;
		height: 200upx;
		// background-color: #FFFFFF;
		// position: relative;
	}

	.charts3 {
		// position: absolute;
		width: 200rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		left: 40rpx;

		// uni-canvas {
		/deep/ canvas {
			width: 40%;
			height: 40%;
		}

		// }
	}

	page {
		background: white;
		width: 750rpx;
		overflow-x: hidden;
	}

	.activeTab {
		color: #36A6FE;
		border-bottom: 2px solid #36A6FE;
	}

	.bg-grey {
		background-color: rgb(234, 231, 231);
		width: 720upx;
		height: 800upx;
		margin: 20upx auto;
		border-radius: 20rpx;

		.bg-grey-title {
			height: 100rpx;
			line-height: 110rpx;
			padding: 0 102rpx 0 20rpx;
				/* #ifdef MP-WEIXIN */
					padding: 0 100rpx 0 100rpx;
					/* #endif */
			ul {
				display: flex;
                height:80rpx;
				justify-content: space-between;
				li {
					width: 72rpx;
					// flex: 1;
					list-style: none;
					font-size: 36rpx;
					// font-size: 32rpx;
					color: rgb(65, 80, 88);
					font-weight: normal;
					font-style: normal;
					// border-bottom:2px solid #000;
					// width:20px
				}

				/* #ifdef MP-WEIXIN */
				li {
						width: 72rpx;
					list-style: none;
					font-size: 36rpx;
					// font-size: 32rpx;
					line-height: 100rpx;
					color: rgb(65, 80, 88);
					font-weight: normal;
					font-style: normal;
					text-align: center;
				}

				/* #endif */
			}

		}

		.bg-grey-top {
			display: flex;
			justify-content: space-between;
			padding: 50upx 20upx 0 20upx;

			.bg-grey-top-item {
				height: 220upx;
				width: 330upx;
				background-color: white;
				color: grey;
				padding: 10upx;

				.box-green {
					font-family: SourceHanSansSC;
					font-weight: 700;
					font-size: 28px;
					color: rgb(24, 144, 255);
					font-style: normal;
					letter-spacing: 0px;
					line-height: 40px;
					text-decoration: none;
				}
			}

		}

		.bg-grey-item {
			height: 220upx;
			width: 680rpx;
			padding: 20rpx 40rpx 20rpx 40rpx;
			background-color: white;
			color: grey;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;

			.bg-grey-item-green {
				font-family: SourceHanSansSC;
				font-weight: 700;
				font-size: 28px;
				color: rgba(0, 187, 122, 1);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 40px;
				text-decoration: none;
			}

			.bg-grey-item-orange {
				font-family: SourceHanSansSC;
				font-weight: 700;
				font-size: 28px;
				color: rgb(255, 149, 2);
				font-style: normal;
				letter-spacing: 0px;
				line-height: 40px;
				text-decoration: none;
			}

			.bg-grey-item-left {
				flex: 3
			}

			.bg-grey-item-right {
				flex: 1;
				margin: auto 0;
			}
		}
	}

	.head-top {
		justify-content: center;
		align-items: center;
		display: flex;
		height: 100%;
		font-size: 28rpx;
	}

	.text-light {
		display: block;
		width: 100%;
		text-align: center;
	}

	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.screen-swiper {
		min-height: 620upx;
	}

	.cu-avatar {
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: transparent;
	}

	.green {
		color: #00BB7A !important;
		// text-decoration: underline;
		font-weight: bold !important;
		font-size: 32rpx !important;
		border-bottom:2px solid  #00BB7A;
		width:64rpx !important;
		// margin: 0 auto;
	}
</style>
